<template>
    <div class="detail page">
        <formHeader :title="title+'详情'"></formHeader>
        <div class="car">
            <div><img src="./car.png"></div>
            <div class="word">
                <div>总数量: {{quantity}}</div>
                <div class="details"></div>
            </div>
            <div class="btn" @click="transform">立即{{title}}</div>
        </div>
        <div class="top">
            <div class="select" @click="turn('/address')" v-if="this.type==0">
                <div><img src="./area.png"></div>
                <div class="address" v-if="showAddress">
                    <div class="info">{{address.province+address.city+address.county+address.detail}}</div>
                    <div class="person">
                        <span>{{address.name}}</span>
                        <span>{{address.mobile}}</span>
                    </div>
                </div>
                <div class="word" v-else>
                    <div class="title">订单配送至</div>
                    <div class="choose">选择收货地址</div>
                </div>
            </div>
            <div class="select"  v-else @click="turn('/repertory/links')">
                <div><img src="./human.png"></div>
                <div class="address" v-if="showUser">
                    <div class="info" v-if="toUser.name&&toUser.code">{{toUser.name}}({{toUser.code}})</div>
                    <div class="person" v-if="toUser.mobile">
                        <span>{{toUser.mobile}}</span>
                    </div>
                </div>
                <div class="word" v-else>
                    <div class="title">转货给</div>
                    <div class="choose">选择收货人</div>
                </div>
            </div>
        </div>
        <div class="con">
            <div class="deliverList">
                <div class="title">
                    发货清单
                </div>
            </div>
            <div class="goodsList">
                <div class="item" v-for="item in data" :key="item.goods.id">
                    <div class="name">{{item.goods.name}}</div>
                    <div class="count">X{{item.count}}</div>
                </div>
            </div>
        </div>
        <div class="remark" @click="showAlert">
            添加备注
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {getAddress} from "@/api/order"
    import {info} from "@/api/user"
    import {transfer} from "@/api/store"
    import {showInfo,showError} from "@/toast"
    import {list} from "@/api/store"
    import {showLoading,hide} from "../../toast";
    export default {
        name : "detail",
        components:{formHeader},
        data(){
            return{
                data:[],
                address:[],
                showAddress:false,
                tem: {
                    user: {},
                    mallOrder: {
                        items: [],
                        remark:''
                    }
                },
                title:'',
                type:'',
                toUser: {
                    name:'',
                    code:'',
                    mobile:''
                },
                showUser:false,
                flag:true
            }
        },
        mounted(){
            showLoading('正在加载')
            this.type = this.$route.query.type
            if(this.type==0){
                this.title='发货'
                this.tem.mallOrder.orderType = 0
            }else {
                this.title='转货'
                this.tem.mallOrder.orderType = 1
            }
            if(this.$route.query.uid!=undefined){
                    this.toUser.name = this.$route.query.name
                    this.toUser.code = this.$route.query.code
                    this.toUser.mobile = this.$route.query.mobile
                    // console.log(this.toUser)
                    this.tem.user.name = this.$route.query.name
                    this.tem.user.code = this.$route.query.code
                    this.tem.user.id = this.$route.query.uid

                this.showUser = true

            }
            if (this.$route.query.addressId){
                this.showAddress = true
                getAddress(this.$route.query.addressId).then(res => {
                    this.address = res.data
                    this.tem.mallOrder.province = this.address.province
                    this.tem.mallOrder.city = this.address.city
                    this.tem.mallOrder.county = this.address.county
                    this.tem.mallOrder.detail = this.address.detail
                    this.tem.mallOrder.mobile = this.address.mobile
                    this.tem.mallOrder.userName = this.address.name
                    this.tem.mallOrder.remark = null
                    hide()
                })
                // info().then(res => {
                //     this.tem.user.name = res.data.name
                //     this.tem.user.code = res.data.code
                //     this.tem.user.id = res.data.id
                //     hide()
                // })
            }
            if (this.type==0){
                hide()
            }
            if(this.type==1&&this.$route.query.uid==undefined){
                this.toUser={}
                this.showUser = false
                let toUserId = JSON.parse(sessionStorage.getItem('toUserId'))

                if(toUserId||toUserId===0){
                    info(toUserId).then(res => {
                        this.toUser = res.data
                        this.tem.user.name = res.data.name
                        this.tem.user.code = res.data.code
                        this.tem.user.id = res.data.id
                        hide()
                    })
                    this.showUser = true
                }
                hide()

            }


            this.data = JSON.parse(sessionStorage.getItem('deliver'))

            if(this.data){
                this.tem.mallOrder.items=[]
                this.data.forEach(item=>{
                    let items = {
                        goodsId: item.goods.id,
                        quantity: item.count,
                        skuName:item.store.skuName
                    }
                    this.tem.mallOrder.items.push(items)
                })
            }

            setTimeout(()=>{
                hide()
            },5000)
        },
        methods:{
            showAlert() {
                this.dialog = this.$createDialog({
                    type: 'prompt',
                    title: '备注',
                    prompt: {
                        value: '',
                        placeholder: '请输入'
                    },
                    onConfirm: (e, promptValue) => {
                        this.tem.mallOrder.remark = promptValue
                        this.$createToast({
                            type: 'warn',
                            time: 1000,
                            txt: `添加备注成功！`
                        }).show()
                    }
                }).show()
            },
            turn(path){
                // console.log(this.$route.query.uid)
                if(this.$route.query.uid==undefined||path=='/address'){
                    this.$router.push({
                        path
                    })
                }

            },
            transform(){
                if(!this.flag){
                    showError('请勿重复点击')
                    return;
                }
                this.flag = false
                if(this.tem.mallOrder.orderType == 0){
                    if(!this.address.name){
                        showInfo("请选择或者新增地址!", "warn")
                        return
                    }
                }else{
                    if(!this.tem.user){
                        showInfo("请选择转货人!", "warn")
                        return
                    }
                }
                // console.log(this.tem)
                transfer(this.tem).then(res => {
                    this.$createDialog({
                        type: 'alert',
                        icon: 'cubeic-alert',
                        title: '操作成功',
                        onConfirm: () => {
                            sessionStorage.removeItem('toUserId')
                            this.toUser={}
                            this.showUser = false
                            this.$router.push({
                                path: '/newmy'
                            })
                        }
                    }).show()
                })
                setTimeout(()=>{
                    this.flag=true
                },5000)
            }
        },
        computed:{
            quantity(){
                let sum = 0
                this.data.forEach(item=>{
                    sum+=Number(item.count)
                })
                return sum
            }
        }
    }
</script>

<style scoped lang="stylus">
.detail
    background-color $page-bg
    .car
        position fixed
        bottom 0
        z-index 999
        background-color: #fff
        width 345px
        height 49px
        display flex
        justify-content space-between
        align-items center
        padding-left 30px
        box-shadow 0 0 20px 0 rgba(0, 163, 152, 0.15)
        img
            width 32px
            height: 32px
        .word
            margin-left 10px
            flex 1
            color #333
            font-size 13px
            .details
                font-size 10px
                color #666
                margin-top 5px
        .btn
            width 115px
            height 49px
            background-color: #00A398
            display flex
            justify-content center
            align-items center
            color #fff
            font-size 15px
    .top
        margin-top 47px
        background-color: #00A398
        padding 10px 15px 0 15px
        .select
            background-color: #fff
            display flex
            align-items center
            border-radius 3px
            padding 17px 15px 13px 15px
            img
                width: 18px
                height: 18px
                color #373737
            .word
                margin-left 10px
            .title
                font-size 12px
            .choose
                margin-top 4px
                font-size 24px
                font-weight bold
            .address
                margin-left 10px
                .info
                    font-size 15px
                .person
                    margin-top 10px
                    font-size 13px
                    span
                        margin-right 15px
    .con
        margin-top 10px
        padding 0 15px
        .deliverList
            background-color: #fff
            border-radius 2px
            .title
                padding 15px
                color #373737
                font-size 15px
                font-weight bold
                border-bottom 1px solid #F2F2F2
        .goodsList
            background-color: #fff
            padding 15px
            color #373737
            font-size 13px
            .item
                display flex
                justify-content space-between
                margin-top 10px
                .name
                    flex 1
                .count
                    text-align right
    .remark
        color #00A390
        font-size 14px
        padding-left 30px
        margin-top 20px


</style>